<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('edit'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/housecraft/css/add.css" />

    <script type="text/javascript" src="html/manager/housecraft/js/add.js"></script>

</head>
<body style="background-color: #ececec;">

	<div id="mainBg" class="bg" style="display: none;">

		<div class="title-bar2">
			<div class="title-text">添加家政服务信息</div>
			<div class="title-btn tc5" onclick="back()">关闭</div>
		</div>

		<div class="rect">
			<div class="title">
				<div class="order">1</div>
				<div class="text">基础信息</div>
			</div>
			<div class="tr1">
				<div class="field1">标题：</div>
				<div class="value1">
					<input type="text" id="title" class="input1 w2" placeholder="请输入标题" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">栏目分类：</div>
				<div class="value1">
					<select id="sortation" class="select3">
                        <option value="">请选择</option>
                        <option value="0">月嫂保姆</option>
	                    <option value="1">清洗保洁</option>
	                    <option value="2">家居清洗</option>
                    </select>
				</div>
			</div>
			<div class="tr1">
				<div class="field1">商家地址：</div>
				<div class="value1">
					<input type="text" id="address" class="input1 w2" placeholder="请输入商家地址（选填）" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">地图坐标：</div>
				<div class="value1">
					<input type="text" id="position" class="input1 w1" placeholder="请输入地图坐标（选填）" autocomplete="off" />
					<span class="tomap" onclick="toMap()">前往腾讯地图</span>
				</div>
			</div>
			<div class="tr1">
				<div class="field1">联系人：</div>
				<div class="value1">
					<input type="text" id="person" class="input1 w1" placeholder="请输入联系人" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">联系电话：</div>
				<div class="value1">
					<input type="text" id="phone" class="input1 w1" placeholder="请输入联系电话" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">备注：</div>
				<div class="value1">
					<input type="text" id="remark" class="input1 w2" placeholder="请输入备注（选填）" autocomplete="off" />
				</div>
			</div>
			<div class="tr6">
				<div class="field1">列表小图：</div>
				<div class="value4">
					<div id="selectImg" class="upload-btn">选择图片</div><span class="img-size">图片尺寸:100*75，不大于500k</span><br />
					<img id="smallPic" src="static/pic/pc/logo_default.jpg" class="img-pic" alt="" />
				</div>
			</div>
		</div>

		<div class="rect">
			<div class="title">
				<div class="order">2</div>
				<div class="text">商家图片</div>
				<div id="selectImg2" class="button2">选择图片</div><span class="img-size2">图片不大于2M（最多可上传6张）</span>
			</div>
			<div id="uploadImgBox" class="tr5">
			</div>
		</div>

		<div class="rect">
			<div class="title">
				<div class="order">3</div>
				<div class="text">服务内容</div>
			</div>
			<div class="tr1">
				<div class="field1">服务身份：</div>
				<div class="value1">
					<select id="identity" class="select3">
                        <option value="">请选择</option>
                        <option value="0">个人</option>
	                    <option value="1">家政公司</option>
                    </select>
				</div>
			</div>
			<div class="tr1">
				<div class="field1">服务特征：</div>
				<div class="value1">
					<input type="text" id="feature" class="input1 w2" placeholder="请输入服务特征，多个用逗号隔开（选填）" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">服务范围：</div>
				<div class="value5">
					<input type="text" id="area" class="display-none" />
					<div class="tag-item" onclick="selectTag(this, 'area')">海城区</div>
					<div class="tag-item" onclick="selectTag(this, 'area')">银海区</div>
					<div class="tag-item" onclick="selectTag(this, 'area')">铁山港区</div>
					<div class="tag-item" onclick="selectTag(this, 'area')">合浦县</div>
				</div>
			</div>
			<div class="tr5">
				<textarea id="introduce" class="textarea1 w5 h1" placeholder="请输入服务详情"></textarea>
			</div>
		</div>

		<div class="rect">
			<div class="title">
				<div class="order">4</div>
				<div class="text">资费套餐</div>
			</div>
			<div class="tr1">
				<div class="field1">展示时长：</div>
				<div class="value1">
					<input type="radio" name="showtime" class="chenk1" value="0" onclick="setExpiretime(30)" />1个月
                    <input type="radio" name="showtime" class="chenk2" value="1" onclick="setExpiretime(92)" />3个月
                    <input type="radio" name="showtime" class="chenk2" value="2" onclick="setExpiretime(183)" />半年
                    <input type="radio" name="showtime" class="chenk2" value="3" onclick="setExpiretime(365)" />1年
                    <input type="radio" name="showtime" class="chenk2" value="4" onclick="setExpiretime(3650)" />不限制
				</div>
			</div>
			<div class="tr1">
				<div class="field1">到期时间：</div>
				<div class="value1">
					<input type="text" id="expiretime" class="input1 w3 po1" placeholder="请选择到期时间" autocomplete="off" />
				</div>
			</div>
			<div class="tr1">
				<div class="field1">初始状态：</div>
				<div class="value1">
					<input type="radio" name="status" class="chenk1" value="0" />待审核
                    <input type="radio" name="status" class="chenk2" value="1" checked="checked" />展示中
				</div>
			</div>
		</div>

		<div class="button1" onclick="saveHousecraft()">保存</div>

	</div>

	<script type="text/javascript">
		layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#expiretime'
            });
        });

		var files = '';
        var fileList = {};
		var fileNum = 0;
	    layui.use('upload', function() {
	        var upload = layui.upload;
	        var uploadInst = upload.render({
	            elem: '#selectImg', 
	            accept: 'images', 
	            acceptMime: 'image/*', 
	            auto: false, 
	            size: 500, 
	            choose: function(obj) {
	                obj.preview(function(index, file, result) {
	                    getItem('smallPic').src = result;
	                    files = result;
	                });
	            }, 
	        });

	        var uploadInst2 = upload.render({
				elem: '#selectImg2', 
				accept: 'images', 
				acceptMime: 'image/*', 
				auto: false, 
			  	size: 2048, 
			  	choose: function(obj) {
			  		obj.preview(function(index, file, result) {
			  			var newPic = '';
			  			var uuid = getUUID();
			  			fileList[uuid] = encodeURIComponent(result);

			  			newPic += '<div class="upload-img" style="background-image: url(\'' + result + '\');">';
			  			newPic += '<img src="static/pic/pc/delete.png" class="button4" onclick="deletePic(this, \'' + uuid + '\')" />';
			  			newPic += '</div>';
			  			setHtml('uploadImgBox', getHtml('uploadImgBox') + newPic);

			  			fileNum++;
			  			if (fileNum >= 6) {
			  				setDisplay('selectImg2', 'none');
			  			}
			  		});
			  	}
			});
	    });

	    function deletePic(obj, index) {
			delete fileList[index];
			obj.parentNode.parentNode.removeChild(obj.parentNode);

			fileNum--;
			if (fileNum < 6) {
  				setDisplay('selectImg2', '');
  			}
		}
	</script>

</body>
</html>